import { Component, Host, h, Prop, State, ComponentInterface, Method, VNode, Watch } from '@stencil/core';
import { commands } from '../../command';
import { DataItemProvider } from '../../interface';

/**
 * 操作列表
 *
 * @author chitanda
 * @date 2022-06-27 10:06:28
 * @export
 * @class QuickActionList
 */
@Component({
  tag: 'quick-action-list',
  styleUrl: 'quick-action-list.scss',
  shadow: true,
})
export class QuickActionList implements ComponentInterface {
  scrollRef: HTMLDivElement;

  @Prop()
  list: DataItemProvider[] = [];
  @Watch('list')
  watchList(): void {
    this.selectIndex = 0;
  }

  /**
   * 当前选中项索引，主要用于键盘上下键控制选中项
   *
   * @author chitanda
   * @date 2022-06-30 10:06:22
   * @type {number}
   */
  @State()
  selectIndex: number = 0;
  @Watch('selectIndex')
  watchSelectIndex(): void {
    this.calcActivateScroll();
  }

  /**
   * 单机模型执行指令
   *
   * @author chitanda
   * @date 2022-06-28 18:06:41
   * @type {string}
   */
  @Prop()
  command?: string;

  async onItemClick(item: DataItemProvider): Promise<void> {
    if (this.command) {
      await window.quickAction.hide();
      await commands.execute(this.command, item);
    }
  }

  @Method()
  async up(): Promise<void> {
    if (this.selectIndex === 0) {
      this.selectIndex = this.list.length - 1;
    } else {
      this.selectIndex--;
    }
  }

  @Method()
  async down(): Promise<void> {
    if (this.selectIndex >= this.list.length - 1) {
      this.selectIndex = 0;
    } else {
      this.selectIndex++;
    }
  }

  @Method()
  async enter(): Promise<void> {
    if (this.list.length > 0) {
      this.onItemClick(this.list[this.selectIndex]);
    }
  }

  /**
   * 计算激活项滚动条
   *
   * @memberof IBzAppSearch
   */
  calcActivateScroll(): void {
    if (this.scrollRef.scrollHeight > this.scrollRef.offsetHeight && this.list.length > 0) {
      if (this.selectIndex === 0) {
        this.scrollRef.scrollTo({ top: 0 });
        return;
      }
      const dom = this.scrollRef.children[this.selectIndex] as HTMLQuickActionListItemElement;
      if (dom) {
        // 容器高度
        const cHeight = this.scrollRef.offsetHeight;
        // 选中 Dom 节点在容器中距离顶点的位置
        const scrollTop = dom.offsetTop + dom.offsetHeight;
        if (scrollTop > cHeight) {
          this.scrollRef.scrollTo({ top: scrollTop - cHeight });
        } else {
          this.scrollRef.scrollTo({ top: 0 });
        }
      }
    }
  }

  renderNotData(): VNode {
    return <div class='not-data'>暂无数据</div>;
  }

  renderItems(): VNode[] {
    return this.list.map((item, i) => {
      return (
        <quick-action-list-item
          key={i}
          onClick={() => this.onItemClick(item)}
          active={i === this.selectIndex}
          data={item}
        />
      );
    });
  }

  render() {
    return (
      <Host class='quick-action-list'>
        <div class='quick-action-list-scroll' ref={ref => (this.scrollRef = ref)}>
          {this.list.length > 0 ? this.renderItems() : this.renderNotData()}
        </div>
      </Host>
    );
  }
}
